<template>
  <div id="echarts_two">
    <div id="echarts" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echarts_two",
  props: {
    dataList: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  mounted() {
    this.drawLine(this.$props.dataList);
  },
  computed: {
    detail() {
      return this.$props.dataList;
    },
  },
  watch: {
    detail: {
      handler(newValue) {
        this.drawLine(newValue);
      },
      deep: true,
    },
  },

  methods: {
    drawLine(dataList) {
      let myChart = echarts.init(document.getElementById("echarts"));
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: dataList.date,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 8,
            interval: 2,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: dataList.num,
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>